<!--
 * @Author: hhq 1303265482@qq.com
 * @Date: 2024-12-23 13:56:53
 * @LastEditors: hhq 1303265482@qq.com
 * @LastEditTime: 2024-12-23 15:44:21
 * @FilePath: \vue-test\src\views\HomeView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
// 导入 Swiper 相关组件
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination } from "swiper/modules";

// 导入 Swiper 样式
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

// 轮播图数据
const slides = [
  { id: 1, image: "../src/assets/images/主页/u7.svg" },
  { id: 2, image: "../src/assets/images/主页/u8.png" },
  { id: 3, image: "../src/assets/images/主页/u9.png" },
];
</script>

<template>
  <div class="bigBox">
    <div class="banner">
      <swiper
        :modules="[Autoplay, Pagination]"
        :slides-per-view="1"
        :loop="true"
        :autoplay="{
          delay: 2000,
          disableOnInteraction: false,
        }"
        :pagination="{ clickable: true }"
      >
        <swiper-slide v-for="slide in slides" :key="slide.id">
          <img :src="slide.image" alt="banner image" />
        </swiper-slide>
      </swiper>
    </div>

    <div class="main">
      <div class="topbox">
        <div class="headerbox" style="margin-top: -20px;">
          <div class="header">
            <h4>投标预告</h4>
            <div class="more">
              <span>更多</span>
              <img src="../assets/images/主页/u16.png" alt="" />
            </div>
          </div>
          <div class="newsbox">
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
          </div>
        </div>
        <div class="headerbox"  style="margin-top: -20px;">
          <div class="header">
            <h4>投标预告</h4>
            <div class="more">
              <span>更多</span>
              <img src="../assets/images/主页/u16.png" alt="" />
            </div>
          </div>
          <div class="newsbox">
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
          </div>
        </div>
      </div>

      <div class="topbox">
        <div class="headerbox">
          <div class="header">
            <h4>投标预告</h4>
            <div class="more">
              <span>更多</span>
              <img src="../assets/images/主页/u16.png" alt="" />
            </div>
          </div>
          <div class="newsbox">
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
          </div>
        </div>
        <div class="headerbox">
          <div class="header">
            <h4>投标预告</h4>
            <div class="more">
              <span>更多</span>
              <img src="../assets/images/主页/u16.png" alt="" />
            </div>
          </div>
          <div class="newsbox">
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
            <div class="news">
              <img src="../assets/images/主页/u19.png" alt="" />
              <span>【麻城经济开发区譫家园小学...】</span>
              <p>2023-04-13</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bigBox {
  margin-top: 30px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  width: 1050px;
  height: 100vh;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.banner {
  margin-top: 10px;
  display: flex;
  width: 700px;
  height: 300px; /* 设置轮播图高度 */
  border-radius: 45px;
}
.banner img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.main {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  width: 100%;
  height: 800px;
}

.topbox {
  display: flex;
  height: 600px;
  width: 90%;
  justify-content: space-between;
}
.headerbox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 48%;
  height: 100%;
  border-radius: 9px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  border-radius: 9px 9px 0 0;
  background-image: linear-gradient(
    to right,
    rgba(135, 230, 216, 1) 0%,
    rgba(135, 230, 216, 1) 50%,
    rgba(255, 255, 255, 1) 100%
  );
  background-size: cover;
  background-position: left center;
}
.header h4 {
  color: white;
  margin-left: 20px;
}
.more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  gap: 6%;
}

.more span {
  font-size: 10px;
  color: darkgray;
}
.more img {
  width: 10px;
  height: 10px;
}

.newsbox {
  height: 100%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}

.news {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
}

.news img {
  width: 20px;
  height: 20px;
}
.news p {
  margin-left: 20px;
}
</style>
